<template>
    <van-action-sheet v-model="internalShowOrder" title="添加订单" @cancel="cancel" @closed="cancel">
        <div class="address-action-div">
            <div class="address-f">
                <div><van-icon name="location-o" /></div>
                <div class="address-user">
                    <div class="address-userInfo">
                        <span>{{ defaultAddress.name }}</span>
                        <span style="margin-left: 10px;">{{ defaultAddress.tel }}</span>
                    </div>
                    <div class="address-info">
                        <span>{{ defaultAddress.address }}</span>
                    </div>
                </div>
            </div>
            <van-icon name="edit" @click="$router.push('/user/address')"/>
        </div>
        <div class="service-info">
            <div>
                <span>{{ serviceInfo.name }}</span>
            </div>
            <div class="service-price">
                <span>￥{{ serviceInfo.totalFee }}/次起</span>
            </div>
        </div>
        <van-cell-group>
            <van-field v-model="note" label="备注" placeholder="选填" />
        </van-cell-group>
        <div class="action-button">
            <van-button type="primary" round @click="save">加入订单</van-button>
        </div>
    </van-action-sheet>
</template>

<script>

export default {
    name: "ServiceOrder",
    props: ['showOrder', 'serviceInfo'],
    data() {
        return {
            // 是否展示
            internalShowOrder: false,
            // 备注
            note: "",
            // 默认地址信息
            defaultAddress: {}
        }
    },
    mounted() {
        this.getDefaultAddress()
    },
    methods: {
        // 取消显示订单页面
        cancel() {
            this.internalShowOrder = !this.internalShowOrder
            this.$emit('cancelOrder', false)
        },
        // 选择地址
        onEdit() {

        },
        // 获取默认地址
        async getDefaultAddress() {
            let res = await this.$store.dispatch('getDefaultAddress')
            if (res.success) this.defaultAddress = res.data
            else this.$myFun.resError(res.message)
        },
        // 加入订单
        async save() {
            let res = await this.$store.dispatch('saveOrderInfo', {
                addressId: this.defaultAddress.id,
                serviceId: this.serviceInfo.id,
                note: this.note
            })
            if(res.success) this.$toast.success(res.message)
            else this.$myFun.resError(res.message)
        }
    },
    watch: {
        showOrder(v1, v2) {
            this.internalShowOrder = v1
        }
    }
}
</script>

<style scoped>
.van-icon {
    font-size: 20px;
}

.action-button {
    width: 80%;
    margin: 0 auto;
    padding: 10px 0 10px 0;
}

.action-button button {
    width: 100%;
}

.address-action-div {
    padding: 10px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.address-f {
    display: flex;
    align-items: center;
}

.address-user {
    margin-left: 12px;
}

.address-userInfo {
    font-size: 1rem;
}

.address-info {
    font-size: 0.8rem;
    color: #323233;
}

.service-info {
    padding: 10px 16px;
    font-size: 0.9rem;
    display: flex;
    justify-content: space-between;
}

.service-price {
    color: #ee0a24;
}
</style>